<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 3 }"
    :wrapper-col="{ span: 18 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <!-- 标题 -->
    <a-form-item
      label="标题"
      placeholder="请输入标题"
      name="title"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.title" />
    </a-form-item>
    <!-- 网址 -->
    <a-form-item label="网址" name="url">
      <a-input v-model:value="formState.url">
        <template #addonBefore>
          <a-select v-model:value="protocol" style="width: 90px">
            <a-select-option value="Http://">Http://</a-select-option>
            <a-select-option value="Https://">Https://</a-select-option>
          </a-select>
        </template>
        <template #addonAfter>
          <a-select v-model:value="suffix" style="width: 80px">
            <a-select-option value=".com">.com</a-select-option>
            <a-select-option value=".cn">.cn</a-select-option>
            <a-select-option value=".org">.org</a-select-option>
            <a-select-option value=".jp">.jp</a-select-option></a-select
          >
        </template>
      </a-input>
    </a-form-item>
    <!-- 图片 -->
    <a-form-item label="图片" name="title" :rules="[{ required: true }]">
      <upLoadImg @changePic="changePic" :initPic="formState.pic" />
    </a-form-item>
    <!-- 简介 -->
    <a-form-item label="简介" name="intro" placeholder="前请输入内容">
      <a-input
        type="textarea"
        v-model:value="formState.intro"
        placeholder="请输入简介"
        show-count
        :maxlength="100"
        allow-clear
      />
    </a-form-item>
    <!-- 提交重置 -->
    <a-form-item :wrapper-col="{ offset: 3, span: 18 }">
      <a-space>
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button html-type="reset">重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>
<script setup>
import { reactive, ref } from "vue";
import upLoadImg from "../../../../components/uploadimg.vue";
// import { parseURL, getExtension } from "@/utils/tools.js";
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false,
  },
  initVal: Object,
});
// 网址
const formState = reactive({
  title: "",
  url: "",
  intro: "",
});
// 分解网址
watch(
  () => props.initVal,
  (newV) => {
    formState.name = newV.name;
    //网址:
    // const { hostname, protocol: pro } = parseURL(newV.url);
    // const [url, ext] = getExtension(hostname);
    // formState.url = url;
    // protocol.value = pro + "//";
    // suffix.value = ext;
    // 介绍
    formState.intro = newV.intro;
    //图片
    // formState.url = newV.url;
    // formState.pic = newV.pic;
  }
);
const protocol = ref("Http://");
const suffix = ref(".com");
const changePic = (path) => {
  formState.pic = path;
};
const onFinish = (values) => {
  console.log("Success:", values);
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>
